<template>
  <flopBoard :flopData="flop" />
  <div class="row">
    <div class="col-sm-12 col-md-6 q-pa-md">
      <topTenMaterial :rows="topTenMaterial" />
    </div>
    <div class="col-sm-12 col-md-6 q-pa-md">
      <topTenCustomer :rows="topTenCustomer" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import flopBoard from './flopTBoard.vue';
import topTenMaterial from './topTenMaterial.vue';
import topTenCustomer from './topTenCustomer.vue';

export default defineComponent({
  name: 'tenantDashboardPage',
  components: {
    flopBoard,
    topTenMaterial,
    topTenCustomer
  },
  data () {
    return {
      flop: {
        sellMat: '', // 1、在售货物数量
        sellMatPer: '', // 在售货物百分比
        sellCat: '', // 2、在售分类数量
        sellCatPer: '', // 在售分类百分比
        shopEnterMoney: '', // 3、线上销售额:线下销售额
        shopPrice: '', // 4、线上客单价
        enterPrice: '', // 5、线下客单价
        deliveryQty: '', // 6、配送总量
        deliveryTime: '', // 7、配送平均时长
        waitDelQty: '' // 8、待配送数量
      },
      topTenMaterial: [], // top10热销商品
      topTenCustomer: [] // top10客户
    }
  },
  mounted () {
    this.refresh();
  },
  methods: {
    refresh () {
      this.$axios.get('/c2/tenant/dashboard/tenantAbstract').then(({ data }) => {
        this.flop = data.flop;
        this.topTenMaterial = data.topTenMaterial;
        this.topTenCustomer = data.topTenCustomer;
      });
    }
  }
});
</script>
